<template>
  <div class="_wrapper _flex-y _flex-start _p10 _background-2">
    <div class="_wrapper-x _flex _flex-start _flex-space-x _p5 _cart _m-b-5">
      <div v-if="!isOther">
        <el-input
          v-model="cameraIndexCode"
          placeholder="请输入视频编码"
        ></el-input>
      </div>
      <div>
        <el-select
          v-model="model"
          class="m-2"
          placeholder="Select"
          size="small"
        >
          <el-option
            v-for="item in $comStore.ai.videoTypeList"
            :key="item.val"
            :label="item.name"
            :value="item.val"
          />
        </el-select>
      </div>
      <el-button class="_m-l-5" size="small" type="primary" @click="play()"
        >开始分析</el-button
      >
    </div>
    <div class="_wrapper-x _cart _over-hidden _flex-item-1">
      <iframe
        id="if-video"
        v-if="aiUrl"
        class="_wrapper _p5 _border"
        :src="aiUrl"
      ></iframe>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: "Person",
      cameraIndexCode: "",
      aiUrl: undefined,
      isOther: true,
    };
  },
  mounted() {
    this.cameraIndexCode = this.$route.query.cameraIndexCode;
    this.model = this.$route.query.model;
    if (this.cameraIndexCode && this.model) {
      this.play();
    } else {
      this.isOther = false;
    }
  },
  methods: {
    play() {
      this.aiUrl = undefined;
      this.$nextTick(() => {
        this.aiUrl = `./#/show?code=img_show&model=${this.model}&cameraIndexCode=${this.cameraIndexCode}`;
        console.log(this.aiUrl);
      });
    },
  },
};
</script>

<style></style>
